<template>
	<div>
	  <!-- 使用 Table 组件 -->
	  <Table
		:tableData="tableData"
		:filters="filters"
		@filter="handleFilter"
		@reset="resetFilter"
		@edit="handleEdit"
		@delete="handleDelete"
	  />
	  
	</div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import Table from './part/table.vue';
  import Export from './part/export.vue';
  
  const dialogTableVisible = ref(false);
  const dialogFormVisible = ref(false);
  const formLabelWidth = '140px';
  
  const form = reactive({
	name: '',
	region: '',
	date1: '',
	date2: '',
	delivery: false,
	type: [],
	resource: '',
	desc: '',
  });
  
  const gridData = [
	{
	  date: '2016-05-02',
	  name: 'John Smith',
	  address: 'No.1518, Jinshajiang Road, Putuo District',
	},
	{
	  date: '2016-05-04',
	  name: 'John Smith',
	  address: 'No.1518, Jinshajiang Road, Putuo District',
	},
	{
	  date: '2016-05-01',
	  name: 'John Smith',
	  address: 'No.1518, Jinshajiang Road, Putuo District',
	},
	{
	  date: '2016-05-03',
	  name: 'John Smith',
	  address: 'No.1518, Jinshajiang Road, Putuo District',
	},
  ];
  
  const tableData = ref([
	{
	  declarationDate: '2025-02-25',
	  customsDeclarationNumber: '722020231201001237',
	  domesticShipper: '某公司',
	  tradeCountry: '美国',
	  foreignShipper: '某国外公司',
	  isPayment: true,
	  totalPaymentAmount: '100000',
	  totalPaymentDifference: '5000',
	},
	{
	  declarationDate: '2025-02-25',
	  customsDeclarationNumber: '2',
	  domesticShipper: '某公司',
	  tradeCountry: '外国',
	  foreignShipper: '某国外公司',
	  isPayment: true,
	  totalPaymentAmount: '100000',
	  totalPaymentDifference: '5000',
	},
	// 其他数据...
  ]);
  
  const filters = ref({
	customsDeclarationNumber: '',
	billOfLadingNumber: '',
	consumptionUnit: '',
	declarationUnit: '',
	declarationDate: '',
	importDate: '',
	productName: '',
	productCode: '',
	domesticConsignee: '',
  });
  
  const exportVisible = ref(false);
  
  const handleFilter = () => {
	console.log('筛选条件', filters.value);
	// 在这里添加筛选逻辑
  };
  
  const resetFilter = () => {
	filters.value = {
	  customsDeclarationNumber: '',
	  billOfLadingNumber: '',
	  consumptionUnit: '',
	  declarationUnit: '',
	  declarationDate: '',
	  importDate: '',
	  productName: '',
	  productCode: '',
	  domesticConsignee: '',
	};
  };
  
  const handleEdit = (row) => {
	console.log('编辑', row);
	// 在这里添加编辑逻辑
  };
  
  const handleDelete = (row) => {
	console.log('删除', row);
	// 在这里添加删除逻辑
  };
  
  const showExport = () => {
	exportVisible.value = true;
  };
  
  const closeExport = () => {
	exportVisible.value = false;
  };
  </script>
  
  <style scoped>
  /* 添加一些样式以适应您的需求 */
  </style>